<template>
  <div class="red">
    <div
      id="vditor"
      class="vditor"
      style="height: 480px;background-color: #f6f8fa"
    ></div>
  </div>
</template>

<script>
export default {
  layout: 'blog',
  mounted() {
    this.initVditor()
  },
  methods: {
    initVditor() {
      const that = this
      const options = {
        width: this.isMobile ? '100%' : '80%',
        height: '0',
        tab: '\t',
        counter: '999999',
        typewriterMode: true,
        mode: 'sv',
        preview: {
          delay: 100,
          show: !this.isMobile
        },
        upload: {
          max: 5 * 1024 * 1024,
          // linkToImgUrl: 'https://sm.ms/api/upload',
          handler(file) {
            const formData = new FormData()
            for (const i in file) {
              formData.append('smfile', file[i])
            }
            const request = new XMLHttpRequest()
            request.open('POST', 'https://sm.ms/api/upload')
            request.onload = that.onloadCallback
            request.send(formData)
          }
        }
      }
      // eslint-disable-next-line no-undef
      this.vditor = new Vditor('vditor', options)
      this.vditor.focus()
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
}
</style>
